<template>
	<view class="pagesContent">		
		<view class="from">
			<view class="item">
				<view class="title">购买渠道 </view>
				<view class="input imputSelect">
					<uni-data-select class="rightSelect" v-model="buyType" :localdata="range" @change="change">
					</uni-data-select>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<text v-if="buyType=='ali'">订单号</text>
					<text v-else>交易单号</text>
				</view>
				<view class="input">
					<input type="text" v-model="orderNo" :placeholder="buyType=='ali' ? '请输入订单号' :'请输入交易单号' "
						placeholder-class="from_pla">
				</view>

			</view>
			<view class="item">
				<view class="title"> 购买会员的账号 </view>
				<view class="input">
					<input type="number" v-model="mobile" maxlength="11" placeholder="输入手机号"
						placeholder-class="from_pla">
				</view>
			</view>
			<view class="item">
				<view class="title"> 新登录密码 </view>
				<view class="input">
					<input password v-model="password" placeholder="输入新密码 " placeholder-class="from_pla">
				</view>

			</view>
			<view class="item">
				<view class="title"> 重复新登录密码 </view>
				<view class="input">
					<input password v-model="rfpassword" placeholder="重复输入新密码 " placeholder-class="from_pla">
				</view>
			</view>
		</view>
		<view class="btn btnDisable" v-if="!disable">确定重置</view>
		<view class="btn" v-else @click="sbmitForm">确定重置</view>
		<view class="adViewBox_bottom">
			<adView></adView>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'	
	import {
		checkPhone
	} from "../../util/util.js"
	export default {		
		data() {
			return {
				title: "重置密码",
				oldMobile: "",
				orderNo: "",
				buyType: "",
				range: [{
						value: "ali",
						text: "支付宝"
					},
					{
						value: 'wx',
						text: "微信"
					},

				],
				mobile: "",
				password: "",
				rfpassword: ""

			}
		},
		onLoad(option) {
			this.oldMobile = option.user
		},

		onShow() {

			if (!this.hasLogin) {
				uni.reLaunch({
					url: "/pages/user/login"
				})
			}
		},

		computed: {
			...mapGetters(["userInfo", "hasLogin", "deviceId"]),
			disable() {
				return this.buyType != "" && this.orderNo != "" && this.mobile != "" && this.password != "" && this
					.rfpassword != ""
			}
		},
		methods: {
			...mapMutations(['logout', "updatelogin", "updateToken", "updateUserInfo"]),
			change(e) {
				console.log(e)
			},

			//  提交表单
			sbmitForm() {
				let this_ = this;
				if (this_.buyType == "") {
					this.text("请选择购买渠道")
					return false
				}
				if (this_.orderNo == "") {
					this.text("交易单号不能为空")
					return false
				}

				if (this_.mobile == "") {
					this.text("手机号不能为空")
					return false
				}
				if (!checkPhone(this.mobile)) {
					this.text("手机号不合法")
					return false
				}
				if (this.mobile != this.oldMobile) {
					this.text("与原始账号不符合")
					return false
				}

				if (this_.password == "" || this_.rfpassword == "") {
					this.text("密码不能为空")
					return false
				}
				if (this_.password != this_.rfpassword) {
					this.text("两次密码不一致")
					return false
				}

				let params = {
					user: this_.mobile,
					password: this.password,
					no: this.orderNo,
					type: this.buyType == "ali" ? 1 : 2

				}
				this.$http.post("api/account/resetPasswordByOrder", params).then((res) => {
					if (res.code == 0) {
						this.updatelogin(true)
						this.updateToken(res.data.token)
						this.updateUserInfo(res.data.info)
						this.text("修改成功")
						uni.reLaunch({
							url: '/pages/dome/index'
						});
					} else {
						this.text(res.msg)
						this_.loading = false;
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}
</style>

<style scoped lang="scss">
	.pagesContent {

		.from {
			width: 668rpx;
			margin: 0 auto 60rpx;


			.item {
				width: 668rpx;
				height: 100rpx;
				border-bottom: 2rpx solid #EAEAEA;

				display: flex;

				.title {
					float: left;
					width: 300rpx;
					height: 100rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #0A090A;
					line-height: 100rpx;
				}

				.input {
					flex: 1;
					width: 524rpx;
					height: 100rpx;
					line-height: 100rpx;
					background: #FFFFFF;

					input {
						width: 100%;
						height: 100%;
						line-height: 100rpx;
						font-size: 30rpx;
						text-align: right;
						font-weight: 400;
						color: #0A090A;
					}
				}

				.imputSelect {

					.rightSelect {
						margin-top: 10rpx;
						display: block;
						border: 0px;
						padding: 0;
							text-align: right;


					}
				}
			}
		}

		.btn {
			margin: 0 auto;
			width: 668rpx;
			height: 80rpx;
			background: #5E99FF;
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			font-weight: bold;
		}

		.btnDisable {
			background: #cccccc;
		}
	}
	.adViewBox_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
</style>